<template>
  <BaseDialog
    v-model:visible="visible"
    title="隐私政策"
    icon="Shield"
    width="800px"
    :show-footer="true"
  >
    <div class="privacy-content">
      <div class="privacy-section">
        <h3>引言</h3>
        <p>
          DevEnv 智能开发环境部署工具（以下简称"我们"或"本平台"）深知个人信息对您的重要性，
          并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，
          恪守以下原则保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、
          最少够用原则、确保安全原则、主体参与原则、公开透明原则等。
          同时，我们承诺严格按照本隐私政策处理您的个人信息。
        </p>
      </div>

      <div class="privacy-section">
        <h3>1. 我们收集的信息</h3>
        
        <h4>1.1 您主动提供的信息</h4>
        <ul>
          <li><strong>账户信息：</strong>用户名、邮箱地址、昵称</li>
          <li><strong>身份验证信息：</strong>密码（加密存储）</li>
          <li><strong>模板内容：</strong>您创建和分享的开发环境配置模板</li>
          <li><strong>反馈信息：</strong>您向我们提供的意见、建议或错误报告</li>
        </ul>

        <h4>1.2 自动收集的信息</h4>
        <ul>
          <li><strong>设备信息：</strong>设备型号、操作系统版本、浏览器类型</li>
          <li><strong>日志信息：</strong>访问时间、IP地址、访问页面、操作记录</li>
          <li><strong>使用数据：</strong>功能使用频率、模板下载次数、错误日志</li>
        </ul>
      </div>

      <div class="privacy-section">
        <h3>2. 信息使用目的</h3>
        <p>我们收集和使用您的个人信息，用于以下目的：</p>
        <ul>
          <li><strong>提供服务：</strong>为您提供开发环境部署和模板管理服务</li>
          <li><strong>身份验证：</strong>验证您的身份，保护账户安全</li>
          <li><strong>服务优化：</strong>分析使用情况，改进产品功能和用户体验</li>
          <li><strong>技术支持：</strong>为您提供技术支持和故障排除</li>
          <li><strong>安全保障：</strong>检测和防范安全威胁，保护平台和用户安全</li>
          <li><strong>法律合规：</strong>履行法律义务，配合监管要求</li>
        </ul>
      </div>

      <div class="privacy-section">
        <h3>3. 信息共享与披露</h3>
        <p>我们不会向第三方出售、出租或以其他方式披露您的个人信息，除非：</p>
        <ul>
          <li>获得您的明确同意</li>
          <li>根据法律法规要求或政府主管部门的要求</li>
          <li>为保护我们的权利、财产或安全，或保护其他用户或公众的权利、财产或安全所合理必需的</li>
          <li>与我们的关联公司、服务供应商、承包商分享，但他们只能将这些信息用于执行我们的服务</li>
        </ul>
        
        <h4>3.1 公开信息</h4>
        <p>您选择公开分享的模板内容将对其他用户可见，包括：</p>
        <ul>
          <li>模板名称、描述和配置内容</li>
          <li>创建者用户名（昵称）</li>
          <li>创建时间和更新时间</li>
        </ul>
      </div>

      <div class="privacy-section">
        <h3>4. 信息存储与安全</h3>
        
        <h4>4.1 存储位置</h4>
        <p>您的个人信息将存储在中华人民共和国境内的服务器上。</p>
        
        <h4>4.2 安全措施</h4>
        <ul>
          <li><strong>数据加密：</strong>密码使用安全哈希算法加密存储</li>
          <li><strong>访问控制：</strong>严格控制数据访问权限，采用最小权限原则</li>
          <li><strong>传输安全：</strong>使用HTTPS加密传输，保护数据传输安全</li>
          <li><strong>安全监控：</strong>实施安全监控和异常检测机制</li>
          <li><strong>定期备份：</strong>定期备份数据，防止数据丢失</li>
        </ul>
        
        <h4>4.3 保存期限</h4>
        <p>
          我们仅在为提供服务所必需的期间内保留您的个人信息。
          当您删除账户时，我们将在合理期间内删除您的个人信息，
          除非法律法规另有规定。
        </p>
      </div>

      <div class="privacy-section">
        <h3>5. 您的权利</h3>
        <p>根据相关法律法规，您享有以下权利：</p>
        <ul>
          <li><strong>知情权：</strong>了解我们处理您个人信息的情况</li>
          <li><strong>访问权：</strong>访问我们持有的您的个人信息</li>
          <li><strong>更正权：</strong>要求更正不准确的个人信息</li>
          <li><strong>删除权：</strong>要求删除您的个人信息</li>
          <li><strong>撤回同意：</strong>撤回您之前给予的同意</li>
          <li><strong>数据可携带权：</strong>获取您的个人信息副本</li>
        </ul>
        
        <p>您可以通过以下方式行使上述权利：</p>
        <ul>
          <li>在个人设置页面中直接操作</li>
          <li>发送邮件至：aw@639246942.xyz</li>
        </ul>
      </div>

      <div class="privacy-section">
        <h3>6. 未成年人保护</h3>
        <p>
          我们非常重视未成年人个人信息的保护。如您为未成年人，
          建议您在监护人的指导下阅读本隐私政策，并在监护人同意和指导下使用我们的服务。
          如果我们发现自己在未事先获得可证实的父母或法定监护人同意的情况下收集了未成年人的个人信息，
          则会设法尽快删除相关数据。
        </p>
      </div>

      <div class="privacy-section">
        <h3>7. Cookie 和类似技术</h3>
        <p>
          我们使用 Cookie 和类似的技术来提供、保护和改进我们的服务。
          Cookie 是网站在您访问时存储在您设备上的小型文本文件。
          我们使用 Cookie 来：
        </p>
        <ul>
          <li>保持您的登录状态</li>
          <li>记住您的偏好设置</li>
          <li>分析网站流量和使用情况</li>
          <li>提供个性化体验</li>
        </ul>
        <p>您可以通过浏览器设置管理 Cookie 偏好。</p>
      </div>

      <div class="privacy-section">
        <h3>8. 隐私政策更新</h3>
        <p>
          我们可能适时更新本隐私政策。当我们对隐私政策进行重大变更时，
          我们会通过在网站显著位置发布通知或向您发送邮件等方式告知您。
          请您定期查看本隐私政策，以了解我们如何保护您的信息。
        </p>
      </div>

      <div class="privacy-section">
        <h3>9. 联系我们</h3>
        <p>如果您对本隐私政策有任何疑问、意见或建议，请通过以下方式联系我们：</p>
        <ul>
          <li><strong>邮箱：</strong>aw@639246942.xyz</li>
          <!-- <li><strong>地址：</strong>中国（具体地址）</li> -->
        </ul>
        <p>我们将在收到您的反馈后尽快回复。</p>
      </div>

      <div class="privacy-footer">
        <p><strong>生效日期：2025年7月29日</strong></p>
        <p><strong>最后更新：2025年7月29日</strong></p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <BaseButton @click="visible = false">
          关闭
        </BaseButton>
        <BaseButton 
          type="primary" 
          @click="handleAgree"
        >
          我已阅读并同意
        </BaseButton>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import BaseDialog from '../common/BaseDialog.vue'
import BaseButton from '../common/BaseButton.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'agree'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleAgree = () => {
  emit('agree')
  visible.value = false
  ElMessage.success('感谢您同意隐私政策')
}
</script>

<style scoped>
.privacy-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--spacing-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.privacy-section {
  margin-bottom: var(--spacing-xl);
}

.privacy-section h3 {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary-100);
}

.privacy-section h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.privacy-section p {
  margin-bottom: var(--spacing-md);
  text-align: justify;
  color: var(--color-text-secondary);
}

.privacy-section ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.privacy-section li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.privacy-section strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.privacy-footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}

.privacy-footer p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

/* 滚动条样式 */
.privacy-content::-webkit-scrollbar {
  width: 6px;
}

.privacy-content::-webkit-scrollbar-track {
  background: var(--color-fill-light);
  border-radius: var(--radius-sm);
}

.privacy-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

.privacy-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-dark);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .privacy-content {
    padding: var(--spacing-sm);
    max-height: 50vh;
  }
  
  .privacy-section h3 {
    font-size: var(--font-size-md);
  }
  
  .dialog-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}
</style>
